<template>
  <div class="navbar-container">
    <!--  html  -->
    <ul class="toolbar-container flex-x-start-center">
      <!--<li>-->
      <!--  <el-dropdown placement="bottom" trigger="click" @command="handleTool($event)">-->
      <!--    <span class="flex-y-center-center dropdown-tool">-->
      <!--      <svg-icon icon-class="s-add" class="icon" />-->
      <!--      <div class="tool">添加</div>-->
      <!--    </span>-->
      <!--    <el-dropdown-menu slot="dropdown">-->
      <!--      <el-dropdown-item command="store">添加店铺</el-dropdown-item>-->
      <!--      <el-dropdown-item command="device">添加终端</el-dropdown-item>-->
      <!--      <el-dropdown-item command="printer">添加云打印机</el-dropdown-item>-->
      <!--      <el-dropdown-item command="speaker">添加云音箱</el-dropdown-item>-->
      <!--    </el-dropdown-menu>-->
      <!--  </el-dropdown>-->
      <!--</li>-->

      <!--<li @click.stop="handleTool('payment')">-->
      <!--  <svg-icon icon-class="s-cash" class="icon" />-->
      <!--  <div class="tool">支付开通</div>-->
      <!--</li>-->
      <li v-if="$isAuthBtn(['SP_BTN_SP_INFO_MODIFY'])" @click.stop="handleTool('spForm')">
        <svg-icon icon-class="s-info" class="icon" />
        <div class="tool">资料修改</div>
      </li>
      <li v-if="$isAuthBtn(['SP_BTN_SP_PASSWD_RESET']) && form_disabled" @click.stop="handleTool('password')">
        <svg-icon icon-class="s-close" class="icon" />
        <div class="tool">密码重置</div>
      </li>
      <!--<li @click.stop="handleTool('login')">-->
      <!--  <svg-icon icon-class="s-login" class="icon" />-->
      <!--  <div class="tool">登录后台</div>-->
      <!--</li>-->
      <!--<li @click.stop="handleTool('logout')">-->
      <!--  <svg-icon icon-class="s-logout" class="icon" />-->
      <!--  <div class="tool">账号注销</div>-->
      <!--</li>-->
    </ul>

    <!--组件-->

    <SpPwFormDialog ref="spPwFormDialog" />

  </div>
</template>

<script>

import SpPwFormDialog from '../SpPwFormDialog'
import { mapGetters } from 'vuex'
export default {
  components: {
    SpPwFormDialog
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      activeTool: null,
	  
	  form_disabled: false
    }
  },
  computed: {
    ...mapGetters(['spInfo','userInfo'])
  },

  beforeCreate() {
  },
  created() {
	  // 设置修改权限
	  const source = this.userInfo.source
	  if (source == '0') {
	  this.form_disabled = false
	  } else if (source == '1') {
	  this.form_disabled = true
	  }
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    handleTool(type) {
      switch (type) {
        case 'spForm':
          this.$router.push({ name: 'SpInformation', query: { spId: this.$route.query.spId, activeMenu: 'infoForm', date: new Date().getTime() } })
          break
        case 'password':
          this.$refs.spPwFormDialog.open().then(() => {})
          break
        case 'login':
          this.$refs.spLoginDialog.open().then(() => {})
          break
        case 'logout':
          break
      }
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-dropdown {
  width: 100%;
  height: 100%;
  color: #303133;

  .dropdown-tool {
    width: 100%;
    height: 100%;

    &:hover {
      color: $primary;
    }
  }

}

.el-dropdown-menu {
  top: 98px !important;
  left: 220px !important;
  color: #303133;

  .el-dropdown-menu__item {
    overflow: hidden;
    margin: 0 10px;
    width: 160px;
    font-weight: bold;
    line-height: 36px;
  }

  .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
    border-radius: 10px;
    background-color: #F2F6Fc;
  }
}

.navbar-container {
  height: 120px;
  padding: 20px 20px 10px;
  color: #303133;

  .toolbar-container {
    //width: 100%;
    height: 90px;
    border-radius: 20px;
    background-color: #fff;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 110px;
      height: 100%;
      cursor: pointer;

      &:not(:last-child):after {
        position: absolute;
        top: 35px;
        right: 0;
        content: '';
        width: 1px;
        height: 20px;
        background-color: #C0C4CC;
      }

      .icon {
        font-size: 20px;

      }

      .tool {
        margin-top: 10px;
        font-size: 14px;
      }

      &:hover {
        color: $primary;
      }
    }
  }
}
</style>
